<div class="Prompt">
    <at-modal ng-if="vm.promptDataClone">
        <at-tab-group>
            <at-tab id="prompt_inventory_tab" ng-if="vm.steps.inventory.tab" state="vm.steps.inventory.tab">{{:: vm.strings.get('prompt.INVENTORY') }}</at-tab>
            <at-tab id="prompt_credential_tab" ng-if="vm.steps.credential.tab" state="vm.steps.credential.tab">{{:: vm.strings.get('prompt.CREDENTIAL') }}</at-tab>
            <at-tab id="prompt_other_prompts_tab" ng-if="vm.steps.other_prompts.tab" state="vm.steps.other_prompts.tab">{{:: vm.strings.get('prompt.OTHER_PROMPTS') }}</at-tab>
            <at-tab id="prompt_survey_tab" ng-if="vm.steps.survey.tab" state="vm.steps.survey.tab">{{:: vm.strings.get('prompt.SURVEY') }}</at-tab>
            <at-tab id="prompt_preview_tab" state="vm.steps.preview.tab">{{:: vm.strings.get('prompt.PREVIEW') }}</at-tab>
        </at-tab-group>
        <div class="Prompt-step" ng-keypress="vm.keypress($event)">
            <div ng-if="vm.steps.inventory.includeStep" ng-show="vm.steps.inventory.tab._active" id="prompt_inventory_step">
                <prompt-inventory
                    prompt-data="vm.promptDataClone"
                    read-only-prompts="vm.readOnlyPrompts">
                </prompt-inventory>
            </div>
            <div ng-if="vm.steps.credential.includeStep" ng-show="vm.steps.credential.tab._active" id="prompt_credential_step">
                <prompt-credential
                    prompt-data="vm.promptDataClone"
                    credential-passwords-form="vm.forms.credentialPasswords"
                    prevent-creds-with-passwords="vm.preventCredsWithPasswords"
                    read-only-prompts="vm.readOnlyPrompts">
                </prompt-credential>
            </div>
            <div ng-if="vm.steps.other_prompts.includeStep && vm.steps.other_prompts.tab._active" id="prompt_other_prompts_step">
                <prompt-other-prompts
                    prompt-data="vm.promptDataClone"
                    other-prompts-form="vm.forms.otherPrompts"
                    is-active-step="vm.steps.other_prompts.tab._active"
                    validate="vm.codeMirror.validate"
                    read-only-prompts="vm.readOnlyPrompts">
                </prompt-other-prompts>
            </div>
            <div ng-if="vm.steps.survey.includeStep" ng-show="vm.steps.survey.tab._active" id="prompt_survey_step">
                <prompt-survey
                    prompt-data="vm.promptDataClone"
                    survey-form="vm.forms.survey"
                    read-only-prompts="vm.readOnlyPrompts">
                </prompt-survey>
            </div>
            <div ng-if="vm.steps.preview.tab._active" id="prompt_preview_step">
                <prompt-preview prompt-data="vm.promptDataClone"></prompt-preview>
            </div>
        </div>
        <div class="Prompt-footer">
            <button id="prompt_cancel" class="Prompt-defaultButton" ng-click="vm.cancel()" ng-show="!vm.readOnlyPrompts">{{:: vm.strings.get('CANCEL') }}</button>
            <button id="prompt_close" class="Prompt-defaultButton" ng-click="vm.cancel()" ng-show="vm.readOnlyPrompts">{{:: vm.strings.get('CLOSE') }}</button>
            <button id="prompt_inventory_next" class="Prompt-actionButton" ng-show="vm.steps.inventory.tab._active" ng-click="vm.next(vm.steps.inventory.tab)" ng-disabled="((vm.promptData.templateType === 'job_template' && !vm.promptDataClone.prompts.inventory.value.id) || (vm.promptData.templateType === 'workflow_job_template' && !vm.promptDataClone.prompts.inventory.value.id && vm.promptDataClone.launchConf.defaults.inventory.id)) && !vm.readOnlyPrompts">{{:: vm.strings.get('NEXT') }}</button>
            <button id="prompt_credential_next" class="Prompt-actionButton"
                ng-show="vm.steps.credential.tab._active"
                ng-click="vm.next(vm.steps.credential.tab)"
                ng-disabled="!vm.readOnlyPrompts &&
                ((preventCredsWithPasswords && (vm.promptDataClone.prompts.credentials.passwords.ssh_password || vm.promptDataClone.prompts.credentials.passwords.become_password || vm.promptDataClone.prompts.credentials.passwords.ssh_key_unlock || (vm.promptDataClone.prompts.credentials.passwords.vault && vm.promptDataClone.prompts.credentials.passwords.vault.length > 0))) ||
                !vm.forms.credentialPasswords.$valid ||
                (vm.promptDataClone.credentialTypeMissing && vm.promptDataClone.credentialTypeMissing.length > 0))">{{:: vm.strings.get('NEXT') }}</button>
            <button id="prompt_other_prompts_next" class="Prompt-actionButton" ng-show="vm.steps.other_prompts.tab._active" ng-click="vm.next(vm.steps.other_prompts.tab)" ng-disabled="!vm.readOnlyPrompts && !vm.forms.otherPrompts.$valid">{{:: vm.strings.get('NEXT') }}</button>
            <button id="prompt_survey_next" class="Prompt-actionButton" ng-show="vm.steps.survey.tab._active" ng-click="vm.next(vm.steps.survey.tab)" ng-disabled="!vm.readOnlyPrompts && !vm.forms.survey.$valid">{{:: vm.strings.get('NEXT') }}</button>
            <button id="prompt_finish" class="Prompt-actionButton" ng-show="vm.steps.preview.tab._active && !vm.readOnlyPrompts" ng-click="vm.finish()" ng-bind="vm.actionText" ng-disabled="vm.actionButtonClicked"></button>
        </div>
    </at-modal>
</div>
